<template>
  <transition name="animation">
    <div :style="{ background: background }" v-if="visable" class="loaidng">
      <div>
        {{ text }}
      </div>
    </div>
  </transition>
</template>
 
<script>
export default {
  data() {
    return {
      visable: false,
      text: "loading...",
      background: "rgba(0,0,0,.3)",
    };
  },
};
</script>
 
<style>
.animation-enter,
.animation-leave-to {
  opacity: 0;
}
.animation-enter-active,
.animation-leave-active {
  transition: opacity 0.6s;
}
.loaidng {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 20px;
}
</style>